@import './main.scss';

$main-theme: (
  dark: $dark,
  light: $light
);

$theme-map: null;

@mixin themify() {
  // 循环获取主题名称（$theme-name），以及主题数据（$map）
  @each $theme-name, $map in $main-theme {
    // 匹配main-theme = theme-name，指定其元素内css规则
    [main-theme='#{$theme-name}'] & {
      // 覆盖规则数据
      $theme-map: () !global;

      // 重设规则数据
      @each $key, $value in $map {
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value
          )
        ) !global;
      }

      // 动态内容，主要是为了执行themed()函数
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}
